Day 2｜實戰練習：製作皮卡丘介紹網頁

2026 iThome 鐵人賽

DAY 2

Build on Google AI

從基礎到實作：使用 Google AI 學習程式設計系列第 2 篇

18th鐵人賽

111534008howardhsu

2026-09-16 22:08:14

110 瀏覽

分享至

從練習開始實作

第一天已經稍微了解 HTML 與 CSS 的基本概念，因此第二天決定直接拿來做一個實際的網頁。
這次選擇的主題是皮卡丘。
因為我個人很喜歡寶可夢(神奇寶貝)，所以就以皮卡丘作為題材，嘗試做出一個較完整的介紹網頁。

先建立 HTML 結構

首先先把內容分成幾個區塊，例如基本介紹、能力值以及技能。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>皮卡丘詳細介紹 - Pikachu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- 頁首 -->
    <header class="site-header">
        <h1>寶可夢圖鑑 #0025</h1>
    </header>

    <!-- 主要內容區塊 -->
    <main class="container">
        <!-- 寶可夢主要標題 -->
        <section class="intro-title">
            <h2>皮卡丘（Pikachu / ピカチュウ）</h2>
            <p class="tag">鼠寶可夢 | 電屬性</p>
        </section>

        <!-- 圖片區塊 -->
        <div class="image-box">
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png" alt="皮卡丘官方繪圖">
        </div>

        <!-- 段落一：基本簡介 -->
        <section class="section-block">
            <h3 class="section-title">基本簡介</h3>
            <p>皮卡丘臉頰兩側有紅色的電氣袋，遭遇危險或警惕時會釋放電流攻擊敵人。尾巴形狀像是一道閃電，是用來感受周遭環境與儲存電力的重要器官。它是《寶可夢》系列中最具代表性的主角寶可夢。</p>
        </section>

        <!-- 段落二：能力種族值 -->
        <section class="section-block">
            <h3 class="section-title">能力種族值</h3>
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>能力項目</th>
                        <th>數值</th>
                        <th>表現評估</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HP（生命值）</td>
                        <td>35</td>
                        <td>較低</td>
                    </tr>
                    <tr>
                        <td>攻擊</td>
                        <td>55</td>
                        <td>普通</td>
                    </tr>
                    <tr>
                        <td>防禦</td>
                        <td>40</td>
                        <td>偏低</td>
                    </tr>
                    <tr>
                        <td>特攻</td>
                        <td>50</td>
                        <td>普通</td>
                    </tr>
                    <tr>
                        <td>特防</td>
                        <td>50</td>
                        <td>普通</td>
                    </tr>
                    <tr>
                        <td>速度</td>
                        <td>90</td>
                        <td>優秀 ⚡</td>
                    </tr>
                    <tr class="total-row">
                        <td><strong>種族值總和</strong></td>
                        <td colspan="2"><strong>320</strong></td>
                    </tr>
                </tbody>
            </table>
        </section>

        <!-- 段落三：代表性技能 -->
        <section class="section-block">
            <h3 class="section-title">代表性技能</h3>
            <ul class="skills-list">
                <li><span class="skill-name">十萬伏特 (Thunderbolt)</span> - 經典的高威力電屬性招式，有機會讓對手麻痺。</li>
                <li><span class="skill-name">電光一閃 (Quick Attack)</span> - 利用極快速度發動的先制攻擊。</li>
                <li><span class="skill-name">伏特攻擊 (Volt Tackle)</span> - 皮卡丘家族的專用強烈撞擊招式，自身也會受反彈傷害。</li>
                <li><span class="skill-name">電球 (Electro Ball)</span> - 速度比對方越快，產生的威力就越大。</li>
            </ul>
        </section>
    </main>

    <!-- 頁腳 -->
    <footer class="site-footer">
        <p>© 2026 皮卡丘圖鑑網頁 | 資料來源：寶可夢官方資料</p>
    </footer>

</body>
</html>

對我來說，一個完整的網頁要包含頁首、標題、內容以及頁腳。
頁首就是比起標題次要重要的存在，用於輔助標題，因此我將圖鑑編號放在頁首，皮卡丘的名稱則作為主要標題；內容就是有關皮卡丘的相關資訊，簡介、種族值、技能池等等就能放進去；頁腳則是資料源自於哪裡。
完成自己的想法後，再將設計方向分享給Gemini，並利用Gemini產生的程式碼作為基礎，再依照自己的需求進行修改。

再建立 CSS 設計版面

/* 全局基礎設定 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Arial, "Microsoft JhengHei", sans-serif;
    background-color: #fefce8;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 頁首樣式 */
.site-header {
    background-color: #facc15;
    text-align: center;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.site-header h1 {
    color: #1e293b;
    font-size: 1.8rem;
    letter-spacing: 1px;
}

/* 主要內容容器 */
.container {
    width: 90%;
    max-width: 650px;
    margin: 30px auto;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    flex: 1;
}

/* 主標題樣式 */
.intro-title {
    text-align: center;
}

.intro-title h2 {
    color: #d97706;
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.tag {
    display: inline-block;
    background-color: #fef08a;
    color: #854d0e;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* 圖片區塊 */
.image-box {
    text-align: center;
    margin: 15px 0 25px 0;
}

.image-box img {
    width: 210px;
    height: auto;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.15));
}

/* 各段落區塊樣式 */
.section-block {
    margin-bottom: 30px;
}

/* 段落標題（左側黃色邊條裝飾） */
.section-title {
    font-size: 1.25rem;
    color: #1e293b;
    border-left: 5px solid #facc15;
    padding-left: 10px;
    margin-bottom: 12px;
}

.section-block p {
    line-height: 1.7;
    color: #475569;
}

/* 種族值表格樣式 */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.stats-table th, 
.stats-table td {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
    font-size: 0.95rem;
}

.stats-table th {
    background-color: #fef08a;
    color: #713f12;
}

.stats-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.stats-table .total-row {
    background-color: #fef9c3;
    font-weight: bold;
}

/* 技能列表樣式 */
.skills-list {
    list-style: none;
}

.skills-list li {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    font-size: 0.95rem;
}

.skill-name {
    font-weight: bold;
    color: #b45309;
}

/* 頁腳樣式 */
.site-footer {
    background-color: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 15px;
    font-size: 0.85rem;
}

有了內容之後，下一步就是處理外觀。
這次想讓整個網站有比較符合皮卡丘的感覺，因此嘗試使用黃色作為主要色調。
至於要如何用AI(Gemini)輔助完成整個設計，就是逐個去設計，想在段落標題前新增裝飾，還有個別表格大小和表格的顏色，逐個去問AI，達到自己想要的樣式就好。

第二天的成果

經過一天的練習，第一天學到的 HTML 與 CSS 開始真正應用在一個小作品上。
從一開始只有標題和文字，到後來加入圖片、介紹、表格以及不同的區塊，過程中也更加熟悉 HTML 與 CSS 的基本使用方式。
這次也嘗試將自己的設計想法交給 AI，再根據產生的程式碼進行修改。雖然不是每一段程式碼都完全自己從零開始撰寫，但透過實際修改與測試，也逐漸理解程式碼與網頁畫面之間的關係。

實作連結